<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Register - Brand</title>
    <link rel="stylesheet" href="../../css/bootstrap.min-register.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css">
    <link rel="stylesheet" href="../../css/smoothproducts.css">
    <script>
        function getLineCaptcha() {
            fetch('/createLineCaptcha')
                .then(response => response.blob())
        .then(blob => {
                const url = window.URL.createObjectURL(blob);
            const img = document.getElementById('captcha-image');
            img.src = url;
        });
        }
    </script>
    <script>
        window.onload = function() {
            getLineCaptcha();
        };
    </script>
</head>

<body>
<nav class="navbar navbar-light navbar-expand-lg fixed-top bg-white clean-navbar">
    <div class="container"><a class="navbar-brand logo" href="#">梅见</a><button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse" id="navcol-1">
            <ul class="navbar-nav ml-auto"></ul>
        </div>
    </div>
</nav>
<main class="page registration-page">
    <section class="clean-block clean-form dark">
        <div class="container">
            <div class="block-heading">
                <h2 class="text-info">注册</h2>
                <p></p>
            </div>
            <form action="/register">
                <div class="form-group" style="text-align: center"><span style="font-size: large" th:text="${msg1}"></span></div>
                <div class="form-group"><label for="uid">用户id</label><input class="form-control item" type="text" id="uid" name="uid"></div>
                <div class="form-group"><label for="username">昵称</label><input class="form-control item" type="text" id="username" name="username"></div>
                <div class="form-group"><label for="userpwd">密码</label><input class="form-control item" type="password" id="userpwd" name="userpwd"></div>
                <div class="form-group">
                    <label for="userpwd">验证码</label>
                    <div style="display: flex">
                        <input type="code" id="inputCode" class="form-control" placeholder="请输入验证码" required name="code" style="margin-right: 10px">
                        <p></p>
                        <img id="captcha-image" alt="验证码" src="/createLineCaptcha" onclick=getLineCaptcha() style="border-radius: 5px;" />
                    </div>
                </div>
                    <button class="btn btn-primary btn-block" type="submit">注册</button>
            </form>
        </div>
    </section>
</main>
<footer class="page-footer dark">
    <div class="container">
        <div class="row">
            <div class="col-sm-3">
                <h5>菜单导航</h5>
                <ul>
                    <li><a href="/">主页</a></li>
                    <li><a href="/toLogin">登录</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="footer-copyright">
        <p>© 2021-2022 </p>
    </div>
</footer>
<script src="../../js/jquery.min-register.js"></script>
<script src="../../js/bootstrap.min-register.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
<script src="../../js/smoothproducts.min-register.js"></script>
<script src="../../js/theme-register.js"></script>
</body>

</html>